<template>
  <div style="width:100%;overflow: hidden;">
    <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="用户管理" sub-title="用户列表" @back="() => null" />
    <a-button type="primary" @click="dialog"> 添加用户 </a-button>
    <Dialog></Dialog>

    <a-table :columns="columns" :data-source="list" :pagination="false">
      <!-- <template #headerCell="{ column }">
        <template v-if="column.key === 'username'">
          <span>
            <smile-outlined />
            {{ list }} Name
          </span>
        </template>
      </template> -->

      <template #bodyCell="{ column, record }">
        <!-- {{ record }} -->
        <template v-if="column.key === 'id'">
          <a>


            {{ record.id }}
          </a>
        </template>

        <template v-if="column.key === 'gender'">
          {{ listSex[record.gender] }}
          <!-- {{record.gender }} -->

        </template>
        <template v-if="column.key === 'operate'">
          <a-button type="primary"
            style="background-color:24, 144, 255 ; position: relative; left: 10px; top: 5px; border-radius: 10px;"
            @click="edit(record)">编辑</a-button>

          <!-- 删除弹出提示框 -->
          <a-popover v-model:visible="record.hint" trigger="click">
            <template #content>
              <div style="width:140px;height:40px;margin-bottom: 10px;border-bottom: 1px solid gray;line-height: 40px;;">
                <alert-two-tone />
                <span style="margin-left: 10px;">您确定要删除吗?</span>
              </div>

              <div style="width:140px;height:30px;display: flex;justify-content: space-between;">
                <a-button type="default"
                  style="position: relative;top:0;left:0;border-radius: 10px;border: 1px solid #d9d9d9;"
                  @click="hide(record)">取消</a-button>
                <a-button type="primary" style="position: relative;top:0;left:0;border-radius: 10px;">确定</a-button>
              </div>

            </template>
            <a-button type="primary" class="box" @click="del(record)">删除</a-button>
          </a-popover>

        </template>

      </template>

    </a-table>

    <!-- <a-pagination v-model:current="current" :total="total" v-model:pageSize="pageSize">
      <template #itemRender="{ type, originalElement }">
        <a v-if="type === 'prev'">上一页</a>
        <a v-else-if="type === 'next'">下一页</a>
        <component :is="originalElement" v-else></component>
      </template>
    </a-pagination> -->

    <!-- 分页 -->
    <a-pagination v-model:current="current" show-quick-jumper :total="total" @change="onChange"
      :showSizeChanger="false" />

  </div>
</template>

<script lang="ts">
//@ts-ignore 忽略ts检查 
import { computed, defineComponent, reactive, toRefs, ref, toRaw, watchEffect, onMounted, onBeforeUnmount } from 'vue';
//@ts-ignore 忽略ts检查
import { SmileOutlined, DownOutlined, AlertTwoTone, ClockCircleOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
//@ts-ignore 忽略ts检查
import { PushCode } from '@/api/user'
//@ts-ignore 忽略ts检查
import { getData ,test} from "@/api/login"
import type { TableColumnsType } from 'ant-design-vue';
// import {  } from '@ant-design/icons-vue';
import Bus from "@/utils/Bus"
import Dialog from "./Dialog.vue"


//#region 
type Key = string | number;
interface DataType {
  id: Key;
  username: string
  email: string,
  gender: number,
  mobile: number,
  status: number,

}

interface ListType {
  [propNname: string]: any
}

interface ListSexType {
  [propNname: string]: any

}
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username'
  },
  {
    title: '手机号码',
    dataIndex: 'mobile',
    key: 'mobile'
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email'
  },


  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender'
  },
  {
    title: "操作",
    dataIndex: "operate",
    key: "operate",
  },
];
//#endregion
let data: DataType[] = [];
export default defineComponent({
  components: {
    SmileOutlined,
    ClockCircleOutlined,
    CheckOutlined,
    CloseOutlined,
    AlertTwoTone,
    Dialog
  },
  props: ['arr'],
  setup(props, ctx) {
    const sexArr = reactive(["男", "女"])

    let list: ListType = ref([])

    let listSex: ListSexType = { 1: "男", 2: "女", 3: "保密" }

    let current = ref(1)
    let pageSize = ref(10)
    
    const onSelectChange = (selectedRowKeys: Key[]) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
    };
    const Authorization = localStorage.getItem('jwt')
    const total = ref(0)
    watchEffect((total) => {
      //@ts-ignore 忽略ts检查
      // getData({page:current.value})
      // getData({ page: current.value }).then((res: any) => {

      // getData({ page: current.value}).then((res: any) => {
      //   console.log("res",res);
        
      //   total.value = res.paginate.total
      //   list.value = res.paginate.data
      //   list.value.forEach((item: any) => {
      //     item.hint = false
      //   });


      // })

      test(Authorization).then(res=>{
         //@ts-ignore 忽略ts检查
         res.Authorization = Authorization 
         //@ts-ignore 忽略ts检查
        // console.log('res.Authorization',res.Authorization);
        
      })
    })

    const changePage = (e: any) => {
      console.log(e);

    }

    const del = (item: any) => {
      console.log(item);

    }

    // 删除提示框
    const visible = ref<boolean>(false);

    const hide = (item: any) => {
      item.hint = false;
    };

    onMounted(() => {

      //@ts-ignore 忽略ts检查
      getData().then((res: any) => {
        // res.Authorization = localStorage.getItem('jwt')
        // total.value = res.paginate.total

        // console.log(current.value);

        // console.log("current", res.paginate.data);


        // list.value = res.paginate.data
        // console.log(list);

      })
    })

    // 分页跳转
    const current1 = ref<number>(1);
    const current2 = ref<number>(2);
    const onChange = (pageNumber: number) => {
      console.log('Page: ', pageNumber);
    };

    // dialog
    const dialog = () => {
      Bus.emit("startDG")

    }

    const edit = (item: any) => {
      Bus.emit("edit", toRaw(item))
    }
    return {
      edit,
      dialog,
      visible,
      hide,
      current1,
      current2,
      onChange,
      pageSize,
      total,
      data,
      columns,
      onSelectChange,
      sexArr,
      list,
      listSex,
      current,
      changePage,
      del
    };
  },
});
</script>

<style scoped>
.ant-btn {
  position: relative;
  left: 1100px;
  bottom: 54px;
}

.box {
  position: relative;
  left: 15px;
  top: 5px;
  background-color: #fff;
  color: rgb(24, 144, 255);
  border: 0;
}
</style>